<template>
	<view class="" v-if="content">
		<up-popup ref="popup" :safe-area-inset-bottom="false" @close="hide"  :show="_show" type="bottom">
			<view class="alert-box">
				<view class="info" >
					<view class="it">
						<view class="image">
							<image :src="content.storeInfo.image" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view>
								<view class="h1">
									{{content.storeInfo.store_name}}
								</view>
								<view class="span">
									库存{{storeInfo.stock}}
								</view>
							</view>
							<view class="money-box">
								<view class="money">
									<view class="em">￥</view>{{storeInfo.price}}
								</view>
								<!-- <view class="num">x1</view> -->
							</view>
						</view>
					</view>
				</view>
		
				<view class="attr-box2">
					<view class="item" v-for="(item,index) in productAttr">
						<view class="msg">
							{{item.attr_name}}
						</view>
						<view class="val">
							<view class="it" v-for="(it,i) in item.attr_values" :class="{on:item.index==i||(i==0&&!item.index)}" @click="item.index=i">{{it}}</view>
						</view>
					</view>
				</view>
				<view class="num-box">
					<view class="msg">
						数量
					</view>
					<view class="val">
						<up-number-box v-model="num" :min="1" :max="storeInfo.stock"></up-number-box>
					</view>
				</view>
				<view class="bottom-box"  v-if="showBtn">
					<view class="btn" @click="onSubmit">
						确定
					</view>
				</view>
				
				<view class="bottom-box-bg" v-else>
				</view>
				
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {ref,computed,watch} from "vue"
	let props = defineProps({
			showBtn:false,
			content:'',
			productValue:{
				type:Array,
				default:[]
			},
			productAttr:{
				type:Array,
				default:[]
			}
		});
	const num=ref(1)
	const attrValue=computed(()=>{
		if(props.content&&props.productAttr.length>0){
			return props.productAttr.map((it=>{
				return it.attr_values[it.index??0]
			})).join(',')
		}else{
			return '';
		}
	})
	const storeInfo=computed(()=>{
		if(props.content){
			if(props.productValue.length>0){
				return props.productValue[attrValue.value]
			}else{
				return props.content.storeInfo
			}
		}
	})
	const _show=ref(false)
	const show=()=>{
		_show.value=true
	}
	const hide=()=>{
		_show.value=false
	}
	const emits = defineEmits();
	watch(attrValue,(newCity, oldCity) => {
		emits('change',{attrValue:attrValue.value,num:num.value})
	},{immediate: true })
	watch(num,(newCity, oldCity) => {
		emits('change',{attrValue:attrValue.value,num:num.value})
	})
	const onSubmit =()=>{
		emits('ok',{attrValue:attrValue.value,num:num.value})
	}
	defineExpose({ show, hide,_show});
</script>

<style lang="scss">
	.alert-box{
		padding: 0 30rpx;
		.num-box{
			.msg{
				color:#aaa;
			}
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.attr-box2{
			margin-top:30rpx;
			.item{
				font-size: 28rpx;
				margin-bottom: 30rpx;
				.msg{
					color:#aaa;
				}
				.val{
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					margin-top:20rpx;
					.it{
						border-radius: 80rpx;
						line-height: 48rpx;
						padding:0 20rpx;
						background-color: #eee;
						color:#000;
						&.on{
							background-color: #F5493D;
							color: #fff;
						}
					}
				}
				
			}
		}
		.bottom-box{
			background-color: #fff;
			padding:10rpx 0;
			display: flex;box-sizing: border-box;
			margin-top:20rpx;
			width:100%;z-index: 99;align-items: center;
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
			.btn{
				width:100%;
				border-radius: 12rpx;
				line-height: 80rpx;
				background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
				text-align: center;
				font-size:28rpx;color:#FFFFFF;font-weight: bold;
			}
		}
	}
	.info{
		padding:28rpx 0;
	
		.it{
			
			display: flex;
			margin-top:24rpx;
			&:nth-child(1){margin-top:0;}
			
		}
		
		
		.image{
			width:180rpx;height:180rpx;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
			image{
				width:100%;height:100%;display: block;
			}
			.icon{
				position: absolute;top:0;left:0;
				width:32rpx;height:32rpx;
			}
		}
		.text{
			flex:1;
			width:442rpx;
			padding:8rpx 0;
			margin-left:20rpx;line-height: 1;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.h1{
				font-weight: bold;
				font-size: 30rpx;
				white-space: nowrap; /* 防止文本换行 */
				overflow: hidden; /* 隐藏溢出的文本 */
				text-overflow: ellipsis; /* 显示省略号 */
			}
			.span{
				margin-top:20rpx;
				font-size: 24rpx;
				color:#838A99;
			}
			.money-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.num{
					color:#979797;
					font-size: 28rpx;
				}
			}
			.money{
				display: flex;
				font-weight: bold;
				color:#F5493D;
				color:#141311;
				font-size: 36rpx;
				align-items: flex-end;
				.em{
					font-size:24rpx;
				}
			}
		}
	}
</style>